<!--
	竞赛组队信息
	author yjl
-->
<template>
	<view
		class="teams"
		@touchmove.prevent
	>
		<!-- 筛选框 -->
		<view class="filter">
			<team-filter />
		</view>
		<view class="list">
			<team-card
				v-for="team in arr_teams"
				:key="team.id"
				:team="team"
				@click="$router.navigateToTeamDetail(team.id)"
			/>
		</view>
	</view>
</template>

<script>
import { getTeams } from '@/api/team.js'
import TeamCard from './components/TeamCard.vue'
import TeamFilter from './components/TeamFilter.vue'
export default {
  components: {
    'team-card': TeamCard,
    'team-filter': TeamFilter
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      is_loadAll: false,
      arr_teams: [],
      searchText: ''
    }
  },
  created() {
    this.loadTeams(true)
  },
  methods: {
    reachBottom() {
      this.loadTeams()
    },
    /**
		 * 加载竞赛团队数据，默认会筛选招募中的队伍
		 * @param {Boolean}  init 是否初始化
		 */
    loadTeams(init = false) {
      if (init) {
        this.$loading()
        this.pageNum = 1
        this.is_loadAll = false
      }
      if (this.is_loadAll) {
        return
      }
      getTeams({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        recruit: 1
      })
        .then(res => {
          if (init) {
            this.arr_teams = []
          }
          this.arr_teams = this.arr_teams.concat(res)
          /* 判断是否加载全部 */
          if (res.length < this.pageSize) {
            this.is_loadAll = true
          } else {
            this.pageNum++
          }
        })
        .finally(() => this.$hideLoading())
    },
  }
}
</script>

<style lang="scss" scoped>
.teams {
  min-height: 100vh;

  .filter {
    position: fixed;
    top: 50px;
    z-index: 50;
    width: 100%;
  }

  .search {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin: 10px 0;

    .iconfont {
      margin-left: 5px;
      font-size: 45rpx;
      color: $primary2;
    }
  }

  .list {
    z-index: 10;
    padding: 10px;
    margin: 10px 2%;
    margin-top: 50px;
    background-color: $primary4;
    border-radius: 12px;
  }
}
</style>
